<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background: blueviolet;
        color: #dfdfdf;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <h2>msg -- {{msg}}</h2>
      <m-head></m-head>
      <parent></parent>
    </div>
    <template id="parent">
      <div>
        <h2 ref="one">parent - parent - 父组件</h2>
        <p>
          <input type="text" v-model="msg" />
        </p>
        <button @click="count++">点击修改myCount</button>
        <button @click="show=!show">点击切换组件的显示和隐藏</button>
        <button @click="changechild">refs 去操作子组件</button>
        <hr />
        <child :msg="msg" :my-count="count" :show="show" ref="child"></child>
      </div>
    </template>
    <template id="child">
      <div>
        <h2>child - child - 1 -子组件</h2>
        <h2>msg -- {{msg}}</h2>
        <h2>myCount === {{myCount}}</h2>
        <h2>num -- {{num}}</h2>
        <p class="box" v-show="show">我是被父组件控制的</p>
      </div>
    </template>
  </body>
  <script>
    //全局注册
    Vue.component("mHead", {
      template: "<header>Head - Head - wh2116 daydayup</header>",
    });
    Vue.component("parent", {
      template: "#parent",
      data() {
        return {
          msg: "Are you OK?",
          count: 1000,
          show: true,
        };
      },
      methods: {
        changechild() {
          //this.$refs.child == 子组件 this
          this.$refs.child.num++;
          this.$refs.child.todochange();
        },
      },
      mouted() {
        this.$refs.one.style.color = "red";
        console.log(this.$refs);
      },
    });
    Vue.component("child", {
      template: "#child",
      data() {
        return {
          num: 2116,
        };
      },
      methods: {
        todochange() {
          console.log("这是子组件的一个函数 - todochange");
        },
      },
      props: {
        msg: String,
        myCount: Number,
        show: [String, Boolean],
      },
    });

    const vm = new Vue({
      //el:"#app"
      components: {},
      data: {
        title: "Vue 组件通信(父改子)",
        msg: "小型、独立和通常可复用的组件构建大型应用",
      },
      mounted() {
        document.getElementsByTagName("title")[0].innerHTML = this.title;
      },
    }).$mount("#app");
  </script>
</html>
